<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" class="navBread">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item  v-for="(bread,id) in breadList" :key="id">{{bread}}</el-breadcrumb-item>

      </el-breadcrumb>
</template>

<script>
export default {
    data(){
        return{
            breadList:[],
        }
    },
    watch:{
        $route:{
            immediate:true,
            handler(){
                console.log("=============检测到路由变化==================")
                this.breadList=[];
                console.log(this.$route.matched)
                const routerInfo =this.$route.matched;
                for(let i=0;i<routerInfo.length;i++){
                    this.breadList.push(routerInfo[i].name)
                }
                console.log("得到的路由数组是：");
                console.log(this.breadList);

            }
        }
    }

}
</script>

<style>

</style>